//登录界面
<template>
  <div class="login_whole">
    <div class="register-box">
        <h2>登录</h2>
        <el-form :model="form" ref="form" label-width="100px" class="input-group">
        <el-form-item label="手机号" style="font-weight: bold">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="font-weight: bold">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
      </el-form>
      <div class="elseOne">
    <span style="position: absolute; left: 16%; top: 50%">
        记住我 <el-checkbox v-model="rememberMe"></el-checkbox>
        </span>
        <span
            class="login-link"
            style="position: absolute; right: 22%; top: 50%"
        >
            新用户？<router-link to="/register">前去注册</router-link>
        </span>
        </div>
        <button type="submit" @click="handleLogin">登录</button>
        </div>
  </div>
</template>

<script>
import Axios from "@/my_axios";

export default {
  mounted() {
    var tmp = JSON.parse(localStorage.getItem('user'));
    if(tmp){
        this.form = tmp;
        this.rememberMe = true;
    }
  },
  data() {
    return {
      rememberMe: false,
      form: {
        mobile: "",
        password: "",
      },
    };
  },
  methods: {
    handleLogin() {
        Axios.post("/sessions", {
            form: this.form,
        }).then((resp) => {
        // console.log("后端返回的是:", resp);
            localStorage.removeItem("user");
            if (resp.data.errno == 0) {
                if (this.rememberMe) {
                    localStorage.setItem("user", JSON.stringify(this.form));
                }
            this.$router.push("/index/user");
        } else {
            alert(resp.data.errmsg);
        }
      });
    },
  },
};
</script>

<style scoped>
.login_whole {
    width: 100%;
    height: 100%;
    background-image: url("../../public/login_picture.jpeg"); /* 设置背景图片 */
    background-size: cover; /* 确保图片覆盖整个容器 */
    background-position: center; /* 居中对齐背景图片 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.register-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 600px;
    text-align: center;
    position: absolute;
}

h2 {
    margin-bottom: 20px;
    color: #333;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

::v-deep .el-input__inner {
    width: 400px;
}

button {
    width: 70%;
    padding: 10px;
    margin-top: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.elseOne {
    position: relative;
    width: 100%;
    height: 50px;
    color: #555;
}

.login-link a {
    color: #007bff;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}
</style>